<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>I'm QQ - 每一天，乐在沟通</title>
	<link rel="stylesheet" href="css/qq_sy.css" />
	<script type="text/javascript" src="js/jquery.js" ></script>
	<script type="text/javascript" src="js/qq_sy.js" ></script>
		<link rel="stylesheet" href="layui-v2.3.0/layui/css/layui.css" />
		<script type="text/javascript" src="layer-v3.1.1/layer/layer.js" ></script>
		<script type="text/javascript" src="js/jquery.js" ></script>
		<script type="text/javascript" src="layer-v3.1.1/layer/layer.js" ></script>
	</head>
	<link rel="icon" href="favicon.ico" type="image/x-icon" />
	<body>
<script>
			function ShowLoginText(){
				
				layer.open({
					type:1,
					title:"QQ",
					anim:3,
					area:["400px","300px"],
					content:$("#loginBox"),
				});
			}
			
		</script>
<div id="loginBox" class="layui-anim layui-anim-scale" >
			<form  autocomplete="off" method="post" action="loginServlet">
			    <div class="login-item"><input  type="text" id="InputUsername" name="name" placeholder="请输入用户名" /></div>
			    <div class="login-item"><input  type="password" id="InputUserPwd" name="pwd" placeholder="请输入密码"/></div>
			    
			   
			    <div class="login-item"><input id="submit_login" type="submit"  value="登陆"></input></div>
			  
			    
			</form>
</div>


<div id="topbar" class="topbar">
    <div class="toppic">
        <div class="topside">
            <a href="" class="logoLink" >im.qq.com</a>
            <ul id="topNav" class="topNav">
                <li class="current"><a  href="qq_sy.html">首页</a></li>
                <li><a  href="">下载</a></li>
                <li><a  href="qq_dt.html">动态</a></li>
            </ul>
        </div>
        <div class="topTool">
            <a class="barzc"  href="zh_zc.jsp" target="_blank">注册</a>
            <ul>
                <li id="loginInfo">
                <%String name =  (String)request.getAttribute("name"); %>
                 <%
                 System.out.print("name"+name);
			    if(name != null){
			    %>
			    
			    <a  id="" href="#"  onclick="ShowLoginText()">Hi:<b><%= name%></b></a>
			    
			    <% 
			    }else{
			    %>
			    <a  id="login" href="#"  onclick="ShowLoginText()">登录</a>
			    <%
			    }
			     %>
                
                
                
                 <!--   <a  id="login" href="#"  onclick="ShowLoginText()">登录</a>-->  
                    <div id="loginPenel" class="loginPenel">
                        <span class="trg"></span>
                        <div class="logindrop" >
                            <div id="nick" class="nick"></div>
                            <div class="lgout"><a id="lgout" href="">[退出]</a></div>
                        </div>
                    </div>
                </li>
                <li><a  href="" target="_blank">QQ安全</a></li>
                <li><a  href="" target="_blank">QQ会员</a></li>
            </ul>
            <div class="flashData"><a  id="viewOnline" href="#">当前在线人数：<em id="cur_online">227,763,015</em></a></div>
        </div>
    </div>
</div>

<div class="crossbanenr wrap">
    <ul id="crossbanenr">

        <li class="timbg" id="timbg">
            <div class="tim-content tim">
                <div class="bnleft">
                    <div class="tim-wenzi"></div>
                    <div class="tim-btn download-btn">
                        <a href="" target="_blank" ></a>
                    </div>
                    <div class="tim-icon"></div>
                </div>
                <img src="img/20.png" class="tim-img">
            </div>
        </li>
        <li class="pcqq" id="pcqq">
           <div class="tim-content qqpc">
               <div class="tim-content_title">
                   <div class="title-text"></div>
                   <div class="title-btn download-btn">
                       <a href="" target="_blank" ></a>
                   </div>
               </div>
               <img src="img/27.png" alt="" class="tim-img" />
           </div>
       </li>
    </ul>
</div>

<div class="content">
    <h1>I'm QQ - 每一天，乐在沟通</h1>
    <div id="fisrtbg" class="activebg fisrtbg" data-stellar-background-ratio="0.03"></div>
    <div class="qfigure qcall">
        <div class="qw960">
            <div class="txtwrap">
                <h2>沟通，是跨越千山万水的亲切声音</h2>
                <p>无论何时何地，你都能自由享受QQ在各类终端<br />上带来的高清通话，与好友一起想聊多久聊多久</p>
                <p><a class="knmore" href="" target="_blank">了解更多 &gt;</a></p>
                <ul class="figs">
                    <li class="f01">屏幕分享</li>
                    <li class="f02">群组通话</li>
                    <li class="f03">两人、多人通话</li>
                </ul>
            </div>
            <div class="qcallAnimate">
            </div>
        </div>
    </div>
</div>
<div id="secondbg" class="activebg secondbg" data-stellar-background-ratio="0.05"></div>
<div class="qfigure qfile">
    <div class="qw960">
        <div class="txtwrap">
            <h2>沟通，是随时随地爽快收发</h2>
            <p>通过QQ,电脑和手机上的文件都能收发自如，<br />更有手机在线查阅，轻松你的工作和生活。</p>
            <p><a class="knmore" href="" target="_blank" >了解更多 &gt;</a></p>
            <ul class="figs">
                <li class="f01">文件漫游</li>
                <li class="f02">多端互传</li>
                <li class="f03">在线预览</li>
            </ul>
        </div>
        <div class="qfileAnimate">
        </div>
    </div>
</div>
<div id="thirdbg" class="activebg thirdbg" data-stellar-background-ratio="0.05"></div>
<div class="qfigure qblog">
    <div class="qw960">
        <div class="txtwrap">
            <h2>沟通，是志同道合的他们放肆青春</h2>
            <p>即使世界很大，你也不会孤单，在兴趣部落<br />有和你一样的人，期待着和你一起发现精彩</p>
            <p><a class="knmore" href="" target="_blank">了解更多 &gt;</a></p>
            <ul class="figs">
                <li class="f01">精彩图集</li>
                <li class="f02">附近热点</li>
                <li class="f03">兴趣社区</li>
            </ul>
        </div>
        <div class="qblogAnimate">
            <div class="qblogWrap" id="qblogWrap">
                <div class="pic1" id="pic1"></div>
                <div class="pic2" id="pic2"></div>
                <div class="pic3" id="pic3"></div>
            </div>
        </div>
    </div>
</div>

</div>

<div class="newfoot">
    <div class="qmaps">
        <div class="plats">
            <h3>了解热门产品</h3>
            <a class="plmb" href="" target="_blank">QQ 手机版</a>
            <a class="plpc" href="" target="_blank">QQ PC版</a>
            <a class="plmac" href="" target="_blank">QQ Mac版</a>
            <a class="plpad" href="" target="_blank">QQ Pad版</a>
        </div>

        <div class="map qac">
            <h3>QQ安全</h3>
            <ul>
                <li><a  href="" target="_blank">安全中心</a></li>
                <li><a  href="" target="_blank">冻结帐号</a></li>
                <li><a  href="" target="_blank">举报恶意行为</a></li>
                <li><a  href="" target="_blank">恢复好友和群</a></li>
                <li><a  href="" target="_blank">注销帐号</a></li>
            </ul>
        </div>

        <div class="map qfaq">
            <h3>帮助反馈</h3>
            <ul>
                <li><a href="" target="_blank">腾讯客服</a></li>
                <li><a href="" target="_blank">反馈问题</a></li>
                <li><a href="" target="_blank">腾讯微博</a></li>
                <li><a href="" target="_blank">新浪微博</a></li>
            </ul>
        </div>

        <div class="map qlink">
            <h3>友情链接</h3>
            <ul>
                <li><a  href="" target="_blank">兴趣部落</a></li>
                <li><a  href="" target="_blank">QQ群</a></li>
                <li><a  href="" target="_blank">QQ音乐</a></li>
                <li><a  href="" target="_blank">QQ浏览器</a></li>
                <li><a  href="" target="_blank">腾讯视频</a></li>
                <li><a  href="" target="_blank">腾讯体验中心</a></li>
                <li><a  href="" target="_blank">腾讯电脑管家</a></li>
            </ul>
            <ul class="sub-list">
                <li><a  href="https://office.qq.com/" target="_blank">TIM</a></li>
                <li><a  href="https://docs.qq.com/?adtag=QQguanwang" target="_blank">腾讯文档</a></li>
                <li><a  href="https://www.weiyun.com/" target="_blank">微云</a></li>
                <li><a  href="https://cloud.tencent.com/" target="_blank">腾讯云</a></li>
            </ul>
        </div>
    </div>
    <div class="copyright">
        <p>Copyright &copy; 1998-2018 Tencent. All Rights Reserved.</p>
        <p>腾讯公司 版权所有</p>
    </div>
</div>
</body>
<script>
function lbt(){
	
	if($("#timbg").hasClass("timbg")){
		
		$("#timbg").removeClass("timbg")
		$("#timbg").addClass("timbgnone")
		$("#pcqq").addClass("pcqqblock")
	}else{
		
		$("#pcqq").removeClass("pcqqblock")
		$("#timbg").removeClass("timbgnone")
		$("#timbg").addClass("timbg")
	}
}
	setInterval("lbt()",4000);
</script>
</html>
